import styles from "./index.module.less";
import React, { useContext, useMemo } from "react";
import cName from "classnames";
import useMsgContent from "./hooks/useMsgContent";
import "highlight.js/styles/vs2015.css";
import { IQItem } from "@/pages/BigScreen/context/type";
import { ChatContext } from "@/pages/BigScreen/context/store";
import ChatItem from "../ChatItem";
import ChatFeedModal from "../ChatFeedModal";

function MsgContent() {
  const { showChatList } = useContext(ChatContext);
  const msgContentInst = useMsgContent();

  return (
    <div id="chat_box" className={cName(styles["chat_box"])}>
      {showChatList.map((item: IQItem, index: number) => (
        <ChatItem
          key={`${item.id}-${item?.chatIndex ?? ""}`}
          index={index}
          chatItem={item}
          handleLongPress={msgContentInst.handleLongPress}
          handleFeedBackDownClick={msgContentInst.handleFeedBackDownClick}
        />
      ))}

      <ChatFeedModal
        open={msgContentInst.actionFeedBackDialogVisible}
        onCancel={msgContentInst.handleFeedBackDialogVisibleCancel}
        onOk={msgContentInst.sendFeedBackDownClick}
      />
    </div>
  );
}

export default MsgContent;
